<template>
  <div class="mapChart">
    <div class="map" id="map"></div>
  </div>
</template>

<script>
import axios from 'axios'
import { inject, onMounted, reactive, onUnmounted } from 'vue'
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    let $echarts = inject("echarts")
    let mapData = reactive({})

    async function getState() {
      // mapData = await axios.get("http://localhost:8080/map/json/china.json")
      mapData = await axios("/map/data")
    }

    onMounted(() => {
      let myChart = $echarts.init(document.getElementById('map'))
      getState().then(() => {

        // $echarts.registerMap('china', mapData.data)
        $echarts.registerMap('china', mapData.data.data)

        myChart.setOption({
          title: {
            text: props.title,
            left: "45%",
            top: "5%",
            textStyle: {
              color: "#fff",
              fontSize: 22,
              textShadowBlur: 5,
              textShadowColor: "#33ffff"
            }
          },
          geo: {
            map: 'china',
            itemStyle: {
              areaColor: "#0099ff",
              borderColor: "#00ffff",
              shadowColor: "rgba(230, 130, 70, .5)",
              shadowBlur: 20,
              label: {
                color: '#fff'
              },
            },
            // 高亮状态下的多边形和标签样式
            emphasis: {
              focus: 'self',
              itemStyle: {
                areaColor: "rgba(16,103,149,1)",
              },
              label: {
                color: '#fff'
              }
            },
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            type: "continuous",
            min: 100,
            max: 5000,
            calculable: true,
            inRange: {
              color: ["#50a3ba", "#eac736", "#d94e5d"]
            },
            textStyle: {
              color: "#fff"
            },
            orient: "horizontal",
            padding: [20, 30]
          },
          series: [{
            type: "scatter", // 散点图
            itemStyle: {
              color: "red",
            },
            coordinateSystem: "geo", // 使用地理坐标系
            data: [ // 散点图数据
              {name: "北京", value: [116.46, 39.92, 4367]},
              {name: "上海", value: [121.48, 31.22, 8675]},
              {name: "深圳", value: [114.07, 22.62, 2461]},
              {name: "广州", value: [113.23, 23.16, 1870]},
              {name: "西安", value: [108.45, 34, 3421]}
            ]
          }]
        })
      })
    
      window.addEventListener("resize", (() => {
        myChart.resize();
      }))
    })

    onUnmounted(() => {
      window.removeEventListener("resize")
    })

   return {

   }
  }
}
</script>

<style scoped>
.mapChart, .map {
  width: 100%;
  height: 100%;
}
</style>